<template>
  <view class="page" :key="pageKey">
	<uni-nav-bar :statusBar="true" :leftWidth="200">
		<view slot="left" class="logo-tittle">
			<image style="width: 50rpx; height: 50rpx; border-radius: 50%;" mode="aspectFill" src="/static/image/logo.png"></image>
			<text>极律选车</text>
		</view>
	</uni-nav-bar>
    <!-- 挂载方式 -->
    <view class="box-list">
      <view class="page-list" v-if="is_kol">
        <view class="tips">专场包含车系如下：</view>
        <view class="list-item" v-for="item in configList" :key="item.hid">
          <view class="left">
            <img :src="item.cover" alt="" />
          </view>
          <view class="middle">
            <view class="name">{{ item.name }}</view>
            <view class="price">指导价:{{ item.guide_price }}</view>
          </view>
          <view class="right" v-if="item.is_show_ask_price">
            <button class="btn">询底价</button>
          </view>
        </view>
      </view>
    </view>

    <view v-if="!is_kol">
      <view class="top">
        <view class="num">
          已有<view class="color-num">{{ ask_price_num }}</view>人完成询价
        </view>
        <view class="tips">{{ ask_price_summary }}</view>
      </view>

      <view class="select-item">
        <view class="scroll-box">
          <scroll-view
            scroll-x="true"
            :class="carList.length > 3 ? 'scroll-list' : 'scroll-short'"
            :scroll-into-view="toView"
            :scroll-left="scrollLeft"
          >
            <block v-for="item in carList" :key="item.hid">
              <view class="car-item" :id="'sv' + item.hid" @click="checkItem(item)">
                <view class="img-title">
                  <img :src="item.cover" alt="" />
                  <view class="title">{{ item.name }}</view>
                  <view class="price">{{ item.hidden_price }}</view>
                </view>
                <view class="check" v-if="item.isSelected == 1">
                  <img src="../../static/image/ok.png" alt="" />
                </view>
              </view>
            </block>
          </scroll-view>

          <view class="all-car" @click="showCar" v-if="carList.length > 3">
            <view class="all">全部车系</view>
            <img src="../../static/image/箭头.png" alt="" />
          </view>
        </view>

        <!-- <view class="car-info mt-20">
          <uni-row class="demo-uni-row">
            <uni-col
              class="price-col"
              :span="6"
              style="display: flex; flex-direction: column; align-items: center; justify-content: center;"
            >
              <view class="car-label" style="text-align: center;">落地价</view>
              <view class="car-price" style="text-align: center;">￥{{ currentCar.guide_price }}</view>
            </uni-col>
            <uni-col
              class="price-col"
              :span="6"
              style="display: flex; flex-direction: column; align-items: center; justify-content: center;"
            >
              <view class="car-label" style="text-align: center;">裸车价</view>
              <view class="car-price" style="text-align: center;">￥{{ currentCar.hidden_price }}</view>
            </uni-col>
            <uni-col
              class="price-col"
              :span="6"
              style="display: flex; flex-direction: column; align-items: center; justify-content: center;"
            >
              <view class="car-label" style="text-align: center;">必要花费</view>
              <view class="car-price" style="text-align: center;">￥{{ currentCar.hidden_price }}</view>
            </uni-col>
            <uni-col
              class="price-col"
              :span="6"
              style="display: flex; flex-direction: column; align-items: center; justify-content: center;"
            >
              <view class="car-label" style="text-align: center;">商业保险</view>
              <view class="car-price" style="text-align: center;">￥{{ currentCar.hidden_price }}</view>
            </uni-col>
          </uni-row>
        </view> -->

        <view class="item">
          <view class="left">购车城市</view>
          <view class="middle">
            <picker
              title="选择城市"
              mode="multiSelector"
              range-key="name"
              :range="regionList"
              :value="provinceCityIndex"
              mask-style="background: #000;"
              @change="regionListChange"
              @cancel="cancelRegion"
              @columnchange="regionListColumnchange"
            >
              <view class="picker-box" v-if="isLocation">
                {{
                  newProvinceCityList[provinceCityIndex[0]]
                    ? newProvinceCityList[provinceCityIndex[0]].name
                    : '请选择购车城市'
                }}
                {{
                  newProvinceCityList[provinceCityIndex[0]] &&
                  newProvinceCityList[provinceCityIndex[0]].citys
                    ? newProvinceCityList[provinceCityIndex[0]].citys[provinceCityIndex[1]].name
                    : ''
                }}
              </view>
              <view class="picker-box" v-if="!isLocation">
                {{ provincename }}
              </view>
            </picker>
          </view>
          <view class="right">
            <img src="../../static/image/right.png" alt="" />
          </view>
        </view>

        <view class="item" v-if="dea_is_show" @click="showModal">
          <view class="left">经销商</view>
          <view class="middle">{{ dealerName }}</view>
          <view class="right">
            <img src="../../static/image/right.png" alt="" />
          </view>
        </view>

        <view class="item" v-if="!isEmpower">
          <view class="left">手机号</view>
          <input
            name="input"
            class="middle"
            placeholder="请输入手机号"
            placeholder-style="color:#BEC0C4"
            v-model="phone"
            inputmode="numeric"
            maxlength="11"
            type="text"
            :clueType="clueType"
            @input="inputChange"
          />
          <view class="right" v-if="phone == ''">
            <button class="btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumbers">获取手机号码</button>
          </view>
        </view>
        <view class="item" v-if="!isShow">
          <view class="left">验证码</view>
          <input
            class="middle"
            type="number"
            v-model="sms_code"
            placeholder="请输入验证码"
            placeholder-style="color:#BEC0C4"
          />
          <view class="right">
            <button class="btn" @click="getSMS" v-if="!isSMS">获取验证码</button>
            <button class="btn" @click="getSMS" v-if="isSMS">{{ countdown }}s</button>
          </view>
        </view>
      </view>

      <view class="btn-box">
        <button
          class="btn-price"
          v-if="isEmpower"
          open-type="getPhoneNumber"
          @getphonenumber="onGetPhoneNumber"
        >
          授权手机号查询成交底价
        </button>
        <button class="btn-price" v-else @click="clickForm">
          立即查询成交底价
        </button>
        <view class="tips-text">
          提交信息后可获取最新底价，提交即视为同意
          <view style="color:#3075FE" @click="jumpAgreement">《隐私政策》</view>
        </view>
      </view>

      <uni-popup ref="carpop" mask-background-color="rgba(0,0,0,.4)" safe-area="true">
        <view class="dea-box">
          <view class="cancel-title">
            <view class="cancel" @click="closeModal">取消</view>
            <view class="title">选择车系</view>
          </view>
          <view class="list-box">
            <view
              class="list-item"
              v-for="(item, index) in carList"
              :key="item.hid"
              @click="selectCar(item, index)"
            >
              <view class="title">{{ item.name }}</view>
              <view class="address">
                <view class="distance">指导价：{{ item.guide_price }}</view>
              </view>
              <uni-icons
                v-show="item.isSelected == 1"
                class="icon"
                type="checkmarkempty"
                size="20"
              ></uni-icons>
            </view>
          </view>
        </view>
      </uni-popup>

      <uni-popup ref="popup" mask-background-color="rgba(0,0,0,.4)" safe-area="true">
        <view class="dea-box">
          <view class="cancel-title">
            <view class="cancel" @click="closeModal">取消</view>
            <view class="title">选择经销商</view>
          </view>
          <view class="list-box">
            <view
              class="list-item"
              v-for="item in dealerList"
              :key="item.hid"
              @click="selectDealer(item)"
            >
              <view class="title">{{ item.name }}</view>
              <view class="address">
                <view class="distance" v-if="item.distance != ''">
                  {{ item.distance }} | {{ item.address }}
                </view>
                <view class="distance" v-if="item.distance == ''">
                  {{ item.address }}
                </view>
              </view>
              <uni-icons
                v-show="item.isSelected == 1"
                class="icon"
                type="checkmarkempty"
                size="20"
              ></uni-icons>
            </view>
          </view>
        </view>
      </uni-popup>

      <uni-popup type="center" ref="modalPopup" :mask-click="false">
        <view class="modal">
          <view class="title">温馨提示</view>
          <view class="content">提交成功，我们会尽快与您联系！</view>
          <view class="btn" @click="jumpHome">知道了</view>
        </view>
      </uni-popup>
    </view>

    <view class="mask" v-if="networkConnected">
      <view class="net-box">
        <img mode="widthFix" src="../../static/image/qiu.jpg" alt="" />
        <view class="text">抱歉，页面加载失败了...</view>
        <view class="btn" @click="reloading">重新加载</view>
      </view>
    </view>
  </view>
</template>

<script>
const Api = require('../../utils/api.js');
const request = require('../../utils/request.js');

import { buryReport } from '../../utils/buryReport.js';
import { deliverClickCallback } from '../../utils/deliverClickCallback.js';

export default {
  data() {
    return {
      phonebak: '',
      configList: [],
      mount_log_hid: '',
      is_kol: false,
      carData: {},
      basePrice: {},
      newProvinceCityList: [],
      regionList: [],
      provinceCityIndex: [0, 0],
      phone: '',
      province_id: '',
      city_id: '',
      carId: '',
      dealerId: '',
      dealerName: '请选择意向经销商',
      loc_lng: '',
      loc_lat: '',
      dealerList: [],
      code: '',
      countdown: 60,
      timeClock: null,
      isSMS: false,
      sms_code: '',
      cityName: '',
      provincenName: '',
      carHid: '',
      mount_log_hid: '',
      pages: '', // 页面地址
      pageParams: '', // 页面参数
      log_detail_hid: '',
      page_session_id: '',
      hide: 1,
      conversionTarget: 1,
      clueType: 1,
      text: '',
      isShow: true,   // 验证码输入框显示切换
      phone_sign: '',
      isLocation: false,
      isEmpower: true,
      isClick: false,
      submitType: '',
      reqArgs: {},
      special_hid: '',
      carName: '',
      imageUrl: '',
      carList: [],
      isShowList: true,
      dea_is_show: null,
      toView: '',
      isLoading: true,
      scrollLeft: '0',
      networkConnected: false,
      pageKey: 1,
      ask_price_summary: '',
      ask_price_num: '',
      provincename: '请选择购车城市',
      appIdNum: '',
      currentCar: {}, // 当前选中的车
    };
  },

  async onLoad(options) {
    // 更换线索组件id
    const accountInfo = wx.getAppBaseInfo();
    this.appIdNum = accountInfo.appIdNum;

    uni.showLoading({
      title: '加载中...',
    });

    // 网络监测
    uni.getNetworkType({
      success: (res) => {
        this.networkConnected = res.networkType === 'none' || res.networkType === '2g';
        if (res.networkType === 'none') {
          uni.hideLoading();
        }
      },
    });

    this.reqArgs = options;
    this.mount_log_hid = options.mount_log_hid ? options.mount_log_hid : '';
    this.special_hid = options.special_hid;
    this.getBasePrice();
    this.getPageInfo();

    this.phone = uni.getStorageSync('empower_phone') ? uni.getStorageSync('empower_phone') : '';
    this.phone_sign = uni.getStorageSync('phone_sign') ? uni.getStorageSync('phone_sign') : '';

	
    if (this.phone !== '') {
      this.isEmpower = false;
	  this.isShow = true;
    }

    // 广告访问页面数据上报
    deliverClickCallback('page_view', this.reqArgs);

    setTimeout(() => {
      if (uni.getStorageSync('isNetwork')) {
        uni.hideLoading();
        this.networkConnected = true;
      }
    }, 6000);
  },

  async onShow() {
    wx.hideHomeButton();
  },

  async onHide() {
    this.hide = 0;
  },

  methods: {
    // 配置详情
    getPageInfo() {
      request
        .http({
          url: Api.page_info,
          header: {
            token: uni.getStorageSync('token'),
          },
          type: 'GET',
          data: {
            mount_log_hid: this.mount_log_hid,
          },
        })
        .then((res) => {
          this.configList = res.data.style_list;
          this.is_kol = res.data.is_kol;
          this.kol_info = res.data.kol_info;
          this.banner = res.data.special_info.cover;
          if (this.is_kol) {
            uni.hideLoading();
          } else {
            this.onGetLocationEvent();
          }
        });
    },

    // 获取经纬度
    onGetLocationEvent() {
      return new Promise((resolve) => {

        wx.getFuzzyLocation({
          success: (res) => {
            this.loc_lng = res.longitude;
            this.loc_lat = res.latitude;
            this.isLocation = true;
            resolve('success');
            this.getProvince();
            this.provincename = '';
          },
          fail: () => {
            this.isLocation = false;
            resolve('fail');
            this.getProvince();
            this.dealerName = '请选择意向经销商';
          },
        });
      });
    },

    getBasePrice() {
      request
        .http({
          url: Api.car_list,
          type: 'GET',
          header: {},
          data: {
            special_hid: this.special_hid,
            page: -1,
            page_size: -1,
          },
        })
        .then((result) => {
          if (result.data.list.length === 0) {
            this.isShowList = false;
          }
          this.carHid = result.data.list[0].hid;
          this.carName = result.data.list[0].name;
          this.dea_is_show = result.data.list[0].dea_is_show;

          result.data.list.forEach((item, index) => {
            item.isSelected = index === 0 ? 1 : 0;
          });

          this.currentCar = result.data.list[0];
          this.carList = result.data.list;
          this.ask_price_num = result.data.ask_price_num;
          this.ask_price_summary = result.data.ask_price_summary;
        })
        .catch((err) => {
          // eslint-disable-next-line no-console
          console.log(err, '测试失败');
        });
    },

    getProvince() {
      request
        .http({
          url: Api.province_city,
          type: 'GET',
          header: {},
          data: {
            loc_lng: this.loc_lng,
            loc_lat: this.loc_lat,
            car_style_hid: this.carHid,
          },
        })
        .then((result) => {
          this.newProvinceCityList = result.data.list;
          const _privateList = this.newProvinceCityList;
          const _cityList = _privateList[0].citys;
          this.regionList = [_privateList, _cityList];
          this.province_id = _privateList[0].hid;
          this.city_id = _privateList[0].citys[0].hid;
          this.cityname = _privateList[0].citys[0].name;
          uni.hideLoading();
          if (this.isLocation) {
            this.getDealer();
          }
        });
    },

    regionListChange({ detail }) {
      this.provinceCityIndex = [detail.value[0], detail.value[1]];
      this.province_id = this.regionList[0][detail.value[0]].hid;
      this.city_id = this.regionList[1][detail.value[1]].hid;
      this.provincename = '';
      this.cityname = this.regionList[1][detail.value[1]].name;
      this.getDealer();
      this.isLocation = true;
    },

    // 列更新事件
    async regionListColumnchange({ detail: { column, value } }) {
      if (column === 0) {
        const citylist = this.newProvinceCityList[value].citys;
        this.regionList = [this.newProvinceCityList, citylist];
      }
    },

    cancelRegion() {
      const citylist = this.newProvinceCityList[this.provinceCityIndex[0]].citys;
      this.regionList = [this.newProvinceCityList, citylist];
    },

    // 获取经销商
    getDealer() {
      request
        .http({
          url: Api.dealer_list,
          type: 'GET',
          header: {},
          data: {
            city_id: this.city_id,
            loc_lng: this.loc_lng,
            loc_lat: this.loc_lat,
            car_style_hid: this.carHid,
          },
        })
        .then((result) => {
          result.data.list.forEach((item, index) => {
            item.isSelected = index === 0 ? 1 : 0;
          });

          this.dealerList = result.data.list;

          if (this.dealerList.length > 0) {
            this.dealerName = result.data.list[0].name;
            this.dealerId = result.data.list[0].hid;
          } else {
            this.dealerName = '暂无经销商';
            this.dealerId = '';
          }
        });
    },

    // 选择车系
    selectCar(val, index) {
      this.toView = 'sv' + val.hid;
      this.scrollLeft = index * 200;
      this.carList.forEach((item) => {
        item.isSelected = val.hid === item.hid ? 1 : 0;
      });
      this.carHid = val.hid;
      this.carName = val.name;
      this.imageUrl = val.coupon_pic;
      this.dea_is_show = val.dea_is_show;
      if (this.isLocation && this.dea_is_show) {
        this.getDealer();
      }
      this.$refs.carpop.close();
    },

    // 选择经销商
    selectDealer(val) {
      this.isLocation = true;
      this.dealerList.forEach((item) => {
        item.isSelected = val.hid === item.hid ? 1 : 0;
      });
      this.dealerId = val.hid;
      this.dealerName = val.name;
      this.$refs.popup.close();
    },

    // 获取手机号
    onGetPhoneNumbers(e) {
		if (e.detail.errMsg != 'getPhoneNumber:fail user deny') {
			request
			.http({
				url: Api.decrypt_phone,
				type: 'POST',
				header: {
					token: uni.getStorageSync('token'),
					"app-source": 2,
					"applet-num": 2,
				},
				data: {
				encrypted_data: e.detail.encryptedData,
				iv: e.detail.iv,
				verify_code: e.detail.code
				},
			})
			.then((result) => {
				this.isShow = true;
				const {encode_phone, phone_sign} = result.data;	
				this.phone = encode_phone;
				this.phone_sign = phone_sign;
				uni.setStorageSync('empower_phone', encode_phone);
				uni.setStorageSync('phone_sign', this.phone_sign);
			});
		}else{
			this.isEmpower = false;
		}
    },

    onGetPhoneNumber(e) {
    //   this.isShow = true;
      if (e.detail.errMsg != 'getPhoneNumber:fail user deny') {
        request
          .http({
            url: Api.decrypt_phone,
            type: 'POST',
            header: {
				"app-source": 2,
				"applet-num": 2,
              	token: uni.getStorageSync('token'),
            },
            data: {
              encrypted_data: e.detail.encryptedData,
              iv: e.detail.iv,
			  verify_code: e.detail.code
            },
          })
          .then((result) => {
			const {encode_phone, phone_sign} = result.data;	
            this.phone = encode_phone;
            this.phone_sign = phone_sign;
            uni.setStorageSync('empower_phone', encode_phone);
            uni.setStorageSync('phone_sign', phone_sign);
            this.formClick(1);
          });
      } else {
        this.isEmpower = false;
      }
    },

    inputChange() {
      if (this.phone.length === 11) {
        this.phone_sign = null;
        this.isShow = false;
      } else if (this.phone.length === 0) {
        this.phone_sign = null;
        this.isShow = true
      }
    },
    inputChangebak(e) {
      this.phone = e.detail.value;
      // if (this.phone.length === 11) {
      //   this.phone_sign = null;
      //   this.isShow = false;
      // } else if (this.phone.length === 0) {
      //   this.phone_sign = null;
      //   this.isShow = true
      // }
    },

    showCar() {
      this.$refs.carpop.open('bottom');
    },

    showModal() {
      if (this.dealerList.length !== 0) {
        this.$refs.popup.open('bottom');
      }
    },

    closeModal() {
      this.$refs.popup.close();
      this.$refs.carpop.close();
    },

    clickForm() {
      this.formClick(1);
    },

    formClick(val) {
      if (val !== 1) {
        return;
      }
      this.isEmpower = false;
      if (this.provincename === '请选择购车城市') {
        uni.showToast({
          title: '请选择购车城市',
          icon: 'none',
        });
        return;
      }
      if (this.basePrice.dea_is_show && this.dealerId === '') {
        uni.showToast({
          title: '请选择意向经销商',
          icon: 'none',
        });
        return;
      }
      if (this.phone === '' || this.phone.length !== 11) {
        uni.showToast({
          title: '请输入正确手机号',
          icon: 'none',
        });
        return;
      }
      if (!this.isShow && this.sms_code === '') {
        uni.showToast({
          title: '请输入验证码',
          icon: 'none',
        });
        return;
      }
      const obj = {
        adid: this.reqArgs.adid,
        creativeid: this.reqArgs.creativeid,
        creativetype: this.reqArgs.creativetype,
        clickid: this.reqArgs.clickid,
      };
      request.http({
          url: Api.leave_clue,
          type: 'POST',
          header: {
            token: uni.getStorageSync('token'),
          },
          data: {
            cate: 1,
            province_id: this.province_id,
            city_id: this.city_id,
            style_hid: this.carHid,
            dea_hid: this.dealerId,
            phone:  !this.phone_sign ? this.phone: '', 
            sms_code: this.sms_code || '1234',
            mount_log_hid: this.mount_log_hid ? this.mount_log_hid : '',
            phone_cate: !this.phone_sign ? 2 : 1,
            phone_sign: this.phone_sign,
            dy_ad: obj,
          },
        })
        .then((result) => {
          if (result.data.is_send_sms) {
            deliverClickCallback('form', this.reqArgs);
          }
          this.isEmpower = false;
          this.sms_code = '';
          uni.navigateTo({
            url: `/subPackage/successPage/price?city_id=${this.city_id}&style_hid=${this.carHid}&city_name=${this.cityname}&special_hid=${result.data.special_hid}&douyin_name=${result.data.nickname}&douyin_num=${result.data.account_num}&phone=${result.data.phone}&is_send_sms=${result.data.is_send_sms}&kol_id=${result.data.kol_id}`,
          });
        })
        .catch((err) => {
          // eslint-disable-next-line no-console
          console.log(err, '333');
        });
    },

    jumpHome() {
      this.$refs.modalPopup.close();
    },

    getSMS() {
      if (this.phone === '') {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none',
        });
        return;
      }

      request
        .http({
          url: Api.getCode,
          type: 'POST',
          header: {},
          data: {
            cate: 1,
            phone: this.phone,
          },
        })
        .then(() => {
          this.setTime();
          this.isSMS = true;
        });
    },

    setTime() {
      if (this.countdown === 0) {
        this.countdown = 60;
        clearTimeout(this.timeClock);
        this.isSMS = false;
      } else {
        this.countdown--;
        this.timeClock = setTimeout(() => {
          this.setTime();
        }, 1000);
      }
    },

    jumpAgreement() {
      uni.navigateTo({
        url: '/subPackage/personal/agreement',
      });
    },

    checkItem(val) {
      this.currentCar = val;
      this.carList.forEach((item) => {
        item.isSelected = val.hid === item.hid ? 1 : 0;
      });
      this.carHid = val.hid;
      this.carName = val.name;
      this.imageUrl = val.coupon_pic;
      this.dea_is_show = val.dea_is_show;
      if (this.isLocation && this.dea_is_show) {
        this.getDealer();
      }
    },

    reloading() {
      this.networkConnected = false;
      uni.showLoading({
        title: '加载中...',
        duration: 3000,
        success: () => {
          const currentPages = getCurrentPages();
          uni.redirectTo({
            url: currentPages[currentPages.length - 1]['$page']['fullPath'],
          });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>

.page {
	.logo-tittle {
		display: flex;
		align-items: center;
		gap: 3px;
	}	
  width: 100%;
  height: 100vh;
  background: #fff;
  .box-list {
    background: #f5f9fc;
    .method-box {
      padding: 0 21rpx;
      box-sizing: border-box;
      margin-top: 21rpx;
      .mount-method {
        border-radius: 7rpx;
        height: 109rpx;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        font-size: 31rpx;
        margin-bottom: 21rpx;
        box-sizing: border-box;
        padding: 0 21rpx;
        .picker-view {
          color: #6e7175;
          font-size: 27rpx;
          display: flex;
          align-items: center;
        }
        .right {
          display: flex;
          align-items: center;
          .text {
            font-size: 27rpx;
            font-weight: 400;
            color: #6e7175;
          }
        }
      }
    }

    .page-list {
      font-size: 31rpx;
      margin-top: 20rpx;
      padding: 0 21rpx;
      box-sizing: border-box;
      height: 100vh;
      .tips {
        font-size: 25rpx;
        font-weight: 400;
        color: #6e7175;
        padding-bottom: 28rpx;
      }
      .list-item {
        width: 100%;
        height: 178rpx;
        background: #fff;
        border-radius: 7rpx;
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        padding: 0 15rpx;
        box-sizing: border-box;
        .left {
          height: 100%;
          display: flex;
          align-items: center;
          img {
            width: 199rpx;
            height: 134rpx;
          }
        }
        .middle {
          height: 100%;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .name {
            font-size: 31rpx;
            font-weight: 500;
            color: #222526;
            margin-bottom: 18rpx;
          }
          .price {
            font-size: 22rpx;
            font-weight: 400;
            color: #6e7175;
          }
        }
        .right {
          .btn {
            width: 137rpx;
            height: 58rpx;
            background: #3075fe;
            border-radius: 4rpx;
            font-size: 22rpx;
            font-weight: 500;
            color: #fff;
            line-height: 58rpx;
          }
        }
      }
    }
  }

  .top {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 43rpx 29rpx 0;
    box-sizing: border-box;
    .img-box {
      display: flex;
      justify-content: center;
      transform: translateX(-10rpx);
      margin-bottom: 28rpx;
      img {
        width: 72rpx;
        height: 72rpx;
        border: 3rpx solid #fff;
        margin-right: -20rpx;
        object-fit: cover;
        border-radius: 50%;
      }
    }
    .num {
      font-weight: 500;
      color: #222526;
      font-size: 33rpx;
      display: flex;
      align-items: center;
      margin-bottom: 21rpx;
      .color-num {
        font-weight: 500;
        color: #3075fe;
        font-size: 43rpx;
        margin: 0 15rpx;
      }
    }
    .tips {
      font-weight: 300;
      color: #222526;
      font-size: 25rpx;
    }
  }

  .select-item {
    width: 100%;
    padding: 0 29rpx;
    box-sizing: border-box;
    margin-top: -20rpx;

    .scroll-box {
      width: 100%;
      height: 201rpx;
      display: flex;
      margin-top: 48rpx;

      .scroll-list,
      .scroll-short {
        background: #f6f7fc;
        width: 91.5%;
        white-space: nowrap;
        .car-item {
          display: inline-block;
          width: 180rpx;
          height: 185rpx;
          position: relative;
          margin: 8rpx 0rpx 8rpx 8rpx;
          background: #fff;
          .check {
            width: 43rpx;
            height: 43rpx;
            position: absolute;
            top: 21rpx;
            right: 16rpx;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .img-title {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #fff;
            border-radius: 7rpx;
            img {
              width: 180rpx;
              height: 121rpx;
            }
            .title {
              width: 175rpx;
              font-size: 24rpx;
              font-weight: 400;
              color: #222526;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              text-align: center;
              margin-top: -10rpx;
            }
            .price {
              font-size: 22rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              color: #6e7175;
            }
          }
        }
      }

      .scroll-short {
        background: #f6f7fc;
        width: 100%;
        white-space: nowrap;
      }

      .all-car {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 58rpx;
        height: 201rpx;
        background: #f6f7fc;
        img {
          width: 18rpx;
          height: 18rpx;
        }
        .all {
          height: 108rpx;
          font-size: 22rpx;
          font-weight: 500;
          color: #222526;
          writing-mode: tb-rl;
          text-align: center;
        }
      }
    }
	.car-info{
		background: #f6f7fc;
		padding:10px 0;
		color: #6E7175;
		font-size: 22rpx;
		.car-price{
			color: #FF3322;
			font-size: 24rpx;
			font-weight: 500;
		}
	}
    .item {
      display: flex;
      width: 100%;
      height: 98rpx;
      align-items: center;
      border-bottom: 1rpx solid #dcdde0;

      .left,
      .middle {
        font-weight: 400;
        color: #222526;
        font-size: 29rpx;
      }
      .left {
        width: 116rpx;
        color: #6e7175;
        font-size: 25rpx;
      }
      .middle {
        flex: 1;
        margin-left: 47rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .right {
        img {
          width: 43rpx;
          height: 43rpx;
          margin-top: 25rpx;
        }
        .btn {
          font-weight: 400;
          color: #3075fe;
          font-size: 29rpx;
          background: none;
        }
        button::after {
          border: none;
        }
      }
    }
  }

  .btn-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    bottom: 60rpx;
    left: 0;
    .btn-price {
      width: 692rpx;
      height: 87rpx;
      background: #3075fe;
      border-radius: 4rpx;
      font-weight: 400;
      color: #fff;
      font-size: 29rpx;
      line-height: 87rpx;
      margin-bottom: 21rpx;
    }
    .tips-text {
      font-weight: 400;
      color: #6e7175;
      font-size: 22rpx;
      display: flex;
    }
  }

  .dea-box {
    width: 100%;
    height: 942rpx;
    overflow-y: auto;
    background: #fff;
    padding: 0 29rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .cancel-title {
      width: 100%;
      display: flex;
      align-items: center;
      padding: 29rpx 0;
      box-sizing: border-box;
      border-bottom: 1rpx solid #dcdde0;

      .cancel {
        font-weight: 400;
        color: #222526;
        font-size: 29rpx;
      }
      .title {
        flex: 1;
        text-align: center;
        font-weight: 500;
        color: #222526;
        font-size: 33rpx;
      }
    }
    .list-box {
      width: 100%;
      overflow-y: auto;
      .list-item {
        width: 100%;
        padding-top: 20rpx;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        position: relative;
        .icon {
          position: absolute;
          top: 40%;
          right: 20rpx;
          transform: translate(0, -40%);
        }
        .title {
          font-weight: 500;
          color: #222526;
          font-size: 29rpx;
          margin-bottom: 15rpx;
        }
        .address {
          display: flex;
          font-weight: 400;
          font-size: 22rpx;
          color: #6e7175;
          border-bottom: 2rpx solid #dcdde0;
          padding-bottom: 23rpx;
          padding-right: 100rpx;
          .gang {
            margin: 0 10rpx;
          }
          .distance {
          }
        }
      }
    }
  }

  .modal {
    width: 551rpx;
    background: #fff;
    border-radius: 7rpx;
    padding: 28rpx 0 53rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    .title {
      font-weight: 500;
      color: #021615;
      font-size: 33rpx;
      margin-bottom: 28rpx;
    }
    .content {
      font-weight: 400;
      color: #021615;
      font-size: 29rpx;
      margin-bottom: 57rpx;
    }
    .btn {
      width: 196rpx;
      height: 72rpx;
      background: #3075fe;
      border-radius: 4rpx;
      font-weight: 400;
      color: #fff;
      font-size: 27rpx;
      line-height: 72rpx;
      text-align: center;
    }
  }

  .mask {
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0;
    left: 0;
    .net-box {
      width: 543rpx;
      height: 598rpx;
      background: #fff;
      border-radius: 7rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      img {
        width: 299rpx;
      }
      .text {
        font-size: 29rpx;
        font-weight: 400;
        color: #021615;
        margin-bottom: 57rpx;
      }
      .btn {
        width: 217rpx;
        height: 72rpx;
        background: #3075fe;
        border-radius: 4rpx;
        font-size: 27rpx;
        line-height: 72rpx;
        font-weight: 400;
        color: #fff;
        text-align: center;
      }
    }
  }
}
</style>

<style>
.price-scroll-view {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  padding: 10rpx 0;
}

.flex-nowrap {
  display: flex;
  flex-wrap: nowrap;
}

.price-col {
  min-width: 200rpx;
  text-align: center;
  padding: 0 10rpx;
}

button::after {
  border: none;
}
</style>
